<template>
	<view class="teaching">
		<!-- <view class="top-box" v-if="props.status != 1">
			<view class="top-tip">
				<view class="">
					<u-icon name="arrow-right-double" color="#999999" size="20"></u-icon>
				</view>
				<view class="text">换一批</view>
			</view>
		</view> -->
		<view class="teaching-list">
			<view class="teaching-list-contents">
				<view class="teaching-list-data">
					<view class="teaching-person-image">
						<!-- <image v-if="props.status != 1" :src="urlImage + s.img" mode="aspectFill" /> -->
						<image class="type" :src="urlImage + props.data.img" mode="aspectFill"
							:class="props.data.z_status == 1 ? '' : 'actives'" />
					</view>
					<view class="teaching-person-desc">
						<view class="teaching-person-name-and-money-time">
							<view class="teaching-person-name">
								<text>{{props.data.z_name ? props.data.z_name : '暂无'}}</text>
								<text>{{props.data.Level.title}}助教</text>
							</view>
							<view class="teaching-person-money">
								<text v-if="props.status == 1">{{props.data.Level.price}}/小时</text>
								<u-icon v-if="props.status != 1" name="trash" color="#d64a42" size="28"></u-icon>
							</view>
						</view>
						<view class="teaching-text-desc">
							<text>{{props.data.z_introduce ? props.data.z_introduce : '暂无'}}</text>
						</view>
						<view class="teaching-status-and-button" v-if="props.status == 1">
							<text :class="props.data.z_status == 1 ? '' : 'gary'">{{props.data.status_name}}</text>
							<button @click="checkAngentChange(props.data)">查看助教</button>
						</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script lang="ts" setup>
	import { ref } from 'vue'
	import { postHttpsRequset, urlImage } from '../public-ts-file/request';

	const props = defineProps({
		status: {
			default: 0,
			type: Number
		},
		data: Object
	})

	const checkAngentChange = (parms) => {
		uni.navigateTo({
			url: `/pages/home/school/studentDetail?type=${2}&id=${parms.id}`
		})
	}

	const getAssistant = ref([])
	const getAllList = () => {
		const parms = {
			path: '/shop/Zhujiao/zhujiaolists',
			methods: 'POST',
			data: {
				shop_id: 1
			}
		}
		postHttpsRequset(parms).then(async res => {
			if (res.code == 200) {
				getAssistant.value = res.data.data
			}
		})
	}
	getAllList()
</script>

<style lang="scss" scoped>
	.teaching {
		.top-box {
			display: flex;
			justify-content: flex-end;
			padding-bottom: 26rpx;

			.top-tip {
				display: flex;
				align-items: center;
				padding-right: 30rpx;
			}

			.text {
				opacity: 1;
				/** 文本1 */
				font-size: 10px;
				font-weight: 400;
				letter-spacing: 0px;
				line-height: 14.48px;
				color: rgba(153, 153, 153, 1);
				text-align: left;
				vertical-align: top;
				padding-left: 10rpx;
			}
		}

		.teaching-list {
			padding: 0 30rpx;

			.teaching-list-contents {
				margin-bottom: 30rpx;

				.teaching-list-data {
					display: flex;
					background: #fafafa;
					padding: 20rpx;
					border-radius: 10rpx;

					.teaching-person-image {
						display: flex;

						.type {
							width: 200rpx;
							height: 320rpx;
							border-radius: 10rpx;
							position: relative;

							&::after {
								content: '';
								position: absolute;
								width: 24rpx;
								height: 24rpx;
								border-radius: 1000rpx;
								background: #27B35F;
								left: -5rpx;
								top: -5rpx;
								border: 4rpx solid white;
								z-index: 1;
							}
						}

						image {
							width: 200rpx;
							height: 320rpx;
							border-radius: 10rpx;
							position: relative;

						}
					}

					.teaching-person-desc {
						margin-left: 20rpx;
						flex: 1;

						.teaching-person-name-and-money-time {
							display: flex;
							align-items: center;
							justify-content: space-between;

							.teaching-person-name {
								text {
									font-weight: bold;
									font-size: 30rpx;

									&:nth-last-child(1) {
										color: #999999;
										font-size: 24rpx;
										font-weight: 400;
										margin-left: 10rpx;
									}
								}
							}

							.teaching-person-money {
								text {
									color: #FF5733;
									font-size: 26rpx;
								}
							}
						}

						.teaching-text-desc {
							height: 200rpx;
							overflow: scroll;

							text {
								color: #333333;
								font-size: 24rpx;
							}
						}

						.teaching-status-and-button {
							display: flex;
							align-items: center;
							justify-content: space-between;
							margin-top: 20rpx;

							text {
								color: #FF5733;
								font-size: 26rpx;
							}

							button {
								color: #FFFFFF;
								font-size: 24rpx;
								width: 200rpx;
								height: 60rpx;
								margin: 0;
								background: #3377FE;
								border-radius: 1000rpx;
								display: flex;
								align-items: center;
								justify-content: center;
							}
						}
					}
				}
			}
		}
	}

	::-webkit-scrollbar {
		display: none;
	}

	.actives {
		&::after {
			content: '';
			width: 24rpx;
			height: 24rpx;
			background: #FF5733 !important;
		}
	}

	.gary {
		color: #999 !important;
	}
</style>